<code>viewport</code> - a callback function that is used to determine whether a given view should be shown in an <a href="#dia.Paper.prototype.options.async"><code>async</code></a> paper. If the function returns <code>true</code>, the view is attached to the DOM; if it returns <code>false</code>, the view is detached/unmounted from the DOM. The callback function is provided with three arguments:</p>

<table>
    <tr>
        <td>view</td>
        <td><i>mvc.View</i></td>
        <td>The view in question</td>
    </tr>
    <tr>
        <td>isMounted</td>
        <td><i>boolean</i></td>
        <td>Is the view currently visible in the paper?</td>
    </tr>
    <tr>
        <td>paper</td>
        <td><i>dia.Paper</i></td>
        <td>This paper (for context)</td>
    </tr>
</table>

<p>This function is meant to support hiding of views when they are outside the viewport. In most situations, it is unnecessary to render DOM elements that are not visible by the user; removing those elements from the DOM dramatically improves rendering times of huge graphs (thousands of views) and improves smoothness of user interaction. (If you do need to show a view that falls outside of this viewport, you can manually force the view to be shown using <a href="#dia.Paper.prototype.requireView"><code>paper.requireView()</code></a>. If you need to show views according to a different viewport function, use <a href="#dia.Paper.prototype.checkViewport"><code>paper.checkViewport()</code></a>. If you need to force all views to be shown, use <a href="#dia.Paper.prototype.dumpViews"><code>paper.dumpViews()</code></a>.)</p>

<p>Example usage:</p>

<pre><code>var viewportRect = new g.Rect(0, 0, 600, 400);
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
    model: graph,
    async: true,
    viewport: function(view) {
        var model = view.model;
        var bbox = model.getBBox();
        if (model.isLink()) {
            // vertical/horizontal links have zero width/height
            // we need to manually inflate the bounding box
            bbox.inflate(1);
        }
        // Return true if there is an intersection
        // Return true if bbox is within viewportRect
        return viewportRect.intersect(bbox);
    }
});</code></pre>

<p>The <code>viewport</code> function can also be used to support collapsing/uncollapsing behavior:</p>

<pre><code>var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
    model: graph,
    async: true,
    viewport: function(view) {
        // Return true if model is not hidden
        return !model.get('hidden');
    }
});

paper.on('element:pointerclick', function(view, evt) {
    evt.stopPropagation();
    toggleBranch(view.model);
});

function toggleBranch(root) {
    var shouldHide = !root.get('collapsed');
    root.set('collapsed', shouldHide);
    graph.getSuccessors(root).forEach(function(successor) {
        successor.set('hidden', shouldHide);
        successor.set('collapsed', false);
    });
}</code></pre>
